<template>
  <div class="add-customer">
    <customer-form ref="customerFormRef">
      <template #title>
        <Title title="客户信息录入" />
      </template>
    </customer-form>
    <cus-distribute ref="distributeFormRef">
      <template #title>
        <Title title="分配动作" />
      </template>
    </cus-distribute>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, computed, getCurrentInstance } from 'vue'
import customerForm from '@app/customer/components/customer-form.vue'
import cusDistribute from '@app/customer/components/distribute/add-distribute.vue'
import Title from '@app/customer/components/title.vue'
import { handleType } from '@app/customer/mixins/index'
import { commonStore } from '@/common/store/modules/common'
export default defineComponent({
  name: 'AddCustomer',
  components: { customerForm, Title, cusDistribute },
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const instance: any = getCurrentInstance()

    const cusInfo = computed(() => {
      // 客户信息
      return commonStore().publicCache.cusInfo || []
    })

    const globalFieldsObj: any = computed(() => {
      // 全局字段对象
      return commonStore().publicCache.globalFieldCacheObj || {}
    })

    const cusForm: any = computed(() => {
      const form: any = []
      if (cusInfo.value && cusInfo.value.length) {
        cusInfo.value.forEach((item: any) => {
          const info = globalFieldsObj.value[item.field]
          if (item.glFieldId && info) {
            // 客户信息中添加的全局字段
            handleType(info, props.form, 'add')
            form.push(info)
          }
        })
      }
      return form
    })

    const init = () => {
      nextTick(() => {
        instance?.refs.customerFormRef.setData(props.form, cusForm.value, {})
      })
    }

    // 客户录入信息校验---一期无
    const checkForm = () => {
      instance?.refs.customerFormRef.isCheckForm()
    }

    // 分配校验
    const checkDisForm = () => {
      return instance?.refs.distributeFormRef.check()
    }

    return {
      init,
      cusForm,
      checkForm,
      checkDisForm
    }
  }
})
</script>

<style lang="stylus" scoped>
:deep(.memo)
  margin-left 24px !important
.add-customer
    :deep(.el-form-item)
      width calc(50% - 24px)
      margin-right 24px !important
      &.pairs, &.datetime-range, &.attachment
        width 100%
        &.pairs
          margin-right 0 !important
</style>
